<template>
  <div class="company-profile">
    <!-- 企业形象Banner -->
    <div class="hero-banner">
      <el-image 
        src="https://img.freepik.com/free-photo/business-team-meeting-office_53876-95348.jpg"  
        fit="cover" 
        style="width: 100%; height: 400px;"
      />
      <div class="banner-content">
        <h1>关于我们</h1>
        <p class="slogan">专业托盘解决方案提供商 · 全球物流包装合作伙伴</p>
      </div>
    </div>
 
    <!-- 公司概况 -->
    <div class="section company-overview">
      <el-row :gutter="40">
        <el-col :md="12" :sm="24">
          <h2><el-icon><OfficeBuilding /></el-icon> 公司概况</h2>
          <div class="content">
            <p>XX托盘制造有限公司成立于2005年，是专业从事出口包装材料和物流器具研发、生产、销售的国家高新技术企业。</p>
            <p>公司拥有现代化生产基地3万平方米，年产能达200万片标准托盘，产品远销欧美、日韩等30多个国家和地区。</p>
            <el-divider />
            <el-row :gutter="20">
              <el-col :span="12" v-for="(item,index) in overviewData" :key="index">
                <div class="stat-item">
                  <div class="stat-value">{{ item.value  }}</div>
                  <div class="stat-label">{{ item.label  }}</div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :md="12" :sm="24">
          <el-image 
            src="https://img.freepik.com/free-photo/factory-workers-checking-product-quality_23-2148660750.jpg"  
            style="width: 100%; height: 100%; border-radius: 8px;"
            fit="cover"
          />
        </el-col>
      </el-row>
    </div>
 
    <!-- 发展历程 -->
    <div class="section history-section">
      <h2><el-icon><DataLine /></el-icon> 发展历程</h2>
      <el-steps direction="vertical" :active="historyData.length"  space="80px">
        <el-step 
          v-for="(item,index) in historyData" 
          :key="index" 
          :title="item.year"  
          :description="item.event"  
        />
      </el-steps>
      <div class="history-images">
        <el-image
          v-for="(img,index) in historyImages"
          :key="index"
          :src="img"
          fit="cover"
          style="width: 200px; height: 150px; margin-right: 15px; border-radius: 4px;"
        />
      </div>
    </div>
 
    <!-- 资质荣誉 -->
    <div class="section certification-section">
      <h2><el-icon><Medal /></el-icon> 资质荣誉</h2>
      <el-row :gutter="20">
        <el-col 
          :md="6" 
          :sm="12" 
          v-for="(item,index) in certifications" 
          :key="index"
        >
          <el-card shadow="hover" class="cert-card">
            <el-image 
              :src="item.image"  
              fit="contain"
              style="height: 120px; margin-bottom: 15px;"
            />
            <h3>{{ item.title  }}</h3>
            <p class="cert-desc">{{ item.desc  }}</p>
          </el-card>
        </el-col>
      </el-row>
    </div>
 
    <!-- 企业文化 -->
    <div class="section culture-section">
      <h2><el-icon><User /></el-icon> 企业文化</h2>
      <el-row :gutter="30">
        <el-col :md="6" :sm="12" v-for="(item,index) in cultureData" :key="index">
          <div class="culture-item">
            <div class="culture-icon" :style="{ backgroundColor: item.color  }">
              <el-icon :size="24"><component :is="item.icon"  /></el-icon>
            </div>
            <h3>{{ item.title  }}</h3>
            <p>{{ item.desc  }}</p>
          </div>
        </el-col>
      </el-row>
    </div>
 
    <!-- 生产基地 -->
    <div class="section facility-section">
      <h2><el-icon><House /></el-icon> 生产基地</h2>
      <el-carousel height="400px" :interval="5000">
        <el-carousel-item v-for="(img,index) in facilityImages" :key="index">
          <el-image 
            :src="img" 
            fit="cover"
            style="width: 100%; height: 100%;"
          />
        </el-carousel-item>
      </el-carousel>
      <div class="facility-info">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="总部地址">江苏省苏州市工业园区金鸡湖大道99号</el-descriptions-item>
          <el-descriptions-item label="生产基地">3万平方米现代化厂房</el-descriptions-item>
          <el-descriptions-item label="生产设备">德国进口CNC加工中心20台</el-descriptions-item>
          <el-descriptions-item label="质检体系">ISO9001质量管理体系认证</el-descriptions-item>
          <el-descriptions-item label="年产能">200万片标准托盘</el-descriptions-item>
          <el-descriptions-item label="员工人数">300+专业团队</el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
  </div>
</template>
 
<script setup>
import { ref } from 'vue'
import {
  OfficeBuilding,
  DataLine,
  Medal,
  User,
  House,
  Aim,
  Connection,
  Opportunity,
  Sunny 
} from '@element-plus/icons-vue'
 
// 公司概况数据
const overviewData = ref([
  { value: '18年', label: '行业经验' },
  { value: '200万+', label: '年产能' },
  { value: '30+', label: '合作国家' },
  { value: '500+', label: '客户数量' }
])
 
// 发展历程
const historyData = ref([
  { year: '2005年', event: '公司成立，开始生产普通木质托盘' },
  { year: '2008年', event: '通过ISO9001质量管理体系认证' },
  { year: '2012年', event: '扩建生产基地，引进德国自动化生产线' },
  { year: '2015年', event: '获得出口免熏蒸托盘生产资质' },
  { year: '2018年', event: '被评为国家高新技术企业' },
  { year: '2022年', event: '年销售额突破2亿元，产品远销30国' }
])
 
const historyImages = ref([
  'https://img.freepik.com/free-photo/industrial-factory-with-machines_23-2148207361.jpg', 
  'https://img.freepik.com/free-photo/workers-warehouse_23-2147693695.jpg', 
  'https://img.freepik.com/free-photo/group-diverse-business-people-using-laptop-office_23-2147688017.jpg' 
])
 
// 资质荣誉
const certifications = ref([
  {
    title: '高新技术企业',
    desc: '国家科学技术部认定',
    image: 'https://via.placeholder.com/150x100?text=High-Tech' 
  },
  {
    title: 'ISO9001认证',
    desc: '国际质量管理体系认证',
    image: 'https://via.placeholder.com/150x100?text=ISO9001' 
  },
  {
    title: 'IPPC认证',
    desc: '国际木质包装检疫标准',
    image: 'https://via.placeholder.com/150x100?text=IPPC' 
  },
  {
    title: '绿色工厂',
    desc: '省级环保生产示范单位',
    image: 'https://via.placeholder.com/150x100?text=Green+Factory' 
  }
])
 
// 企业文化 
const cultureData = ref([
  {
    icon: Aim,
    title: '企业愿景',
    desc: '成为全球领先的物流包装解决方案提供商',
    color: '#409EFF'
  },
  {
    icon: Connection,
    title: '企业使命',
    desc: '为客户创造价值，为员工创造机会，为社会创造效益',
    color: '#67C23A'
  },
  {
    icon: Opportunity,
    title: '核心价值观',
    desc: '诚信、创新、专业、共赢',
    color: '#E6A23C'
  },
  {
    icon: Sunny,
    title: '经营理念',
    desc: '质量为本，客户至上，持续改进',
    color: '#F56C6C'
  }
])
 
// 生产基地图片 
const facilityImages = ref([
  'https://img.freepik.com/free-photo/large-industrial-plant-with-many-machines_23-2148207360.jpg', 
  'https://img.freepik.com/free-photo/workers-warehouse_23-2147693695.jpg', 
  'https://img.freepik.com/free-photo/industrial-factory-with-machines_23-2148207361.jpg' 
])
</script>
 
<style lang="scss" scoped>
.company-profile {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 40px;
  
  .hero-banner {
    position: relative;
    margin-bottom: 40px;
    border-radius: 8px;
    overflow: hidden;
    
    .banner-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      color: white;
      width: 100%;
      padding: 0 20px;
      
      h1 {
        font-size: 42px;
        margin: 0 0 10px;
        text-shadow: 0 2px 4px rgba(0,0,0,0.5);
      }
      
      .slogan {
        font-size: 18px;
        margin: 0;
        text-shadow: 0 1px 3px rgba(0,0,0,0.5);
      }
    }
  }
  
  .section {
    margin-bottom: 60px;
    padding: 30px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
    
    h2 {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 0;
      margin-bottom: 25px;
      padding-bottom: 15px;
      border-bottom: 1px solid #eee;
      color: var(--el-color-primary);
      
      .el-icon {
        font-size: 28px;
      }
    }
  }
  
  .company-overview {
    .content {
      p {
        line-height: 1.8;
        margin-bottom: 20px;
      }
    }
    
    .stat-item {
      text-align: center;
      margin-bottom: 20px;
      
      .stat-value {
        font-size: 28px;
        font-weight: bold;
        color: var(--el-color-primary);
        margin-bottom: 5px;
      }
      
      .stat-label {
        font-size: 14px;
        color: #666;
      }
    }
  }
  
  .history-section {
    .history-images {
      display: flex;
      margin-top: 30px;
      overflow-x: auto;
      padding-bottom: 10px;
    }
    
    :deep(.el-step__head) {
      width: 36px;
      height: 36px;
      font-size: 16px;
    }
    
    :deep(.el-step__title) {
      font-size: 18px;
      font-weight: bold;
    }
    
    :deep(.el-step__description) {
      font-size: 15px;
      padding-right: 20px;
    }
  }
  
  .certification-section {
    .cert-card {
      height: 100%;
      text-align: center;
      
      h3 {
        margin: 0 0 10px;
      }
      
      .cert-desc {
        color: #666;
        font-size: 14px;
        margin: 0;
      }
    }
  }
  
  .culture-section {
    .culture-item {
      text-align: center;
      padding: 20px 15px;
      height: 100%;
      
      .culture-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 15px;
        color: white;
      }
      
      h3 {
        margin: 0 0 10px;
      }
      
      p {
        color: #666;
        margin: 0;
        line-height: 1.6;
      }
    }
  }
  
  .facility-section {
    .facility-info {
      margin-top: 30px;
    }
  }
}
 
@media (max-width: 768px) {
  .company-profile {
    padding: 0 10px 20px;
    
    .hero-banner {
      .banner-content {
        h1 {
          font-size: 28px !important;
        }
        
        .slogan {
          font-size: 16px !important;
        }
      }
    }
    
    .section {
      padding: 20px 15px;
      margin-bottom: 40px;
    }
    
    .history-section {
      :deep(.el-step__description) {
        font-size: 14px !important;
      }
    }
  }
}
</style>